<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Demo</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="./js/demo.js"></script>
    <style>

        a.x{
            font-size: large;
            color: aqua;
        }
        /*div 下的 子元素 a*/
        div a{
            color : blueviolet;
        }
    </style>
</head>
<body>
    =================================<br/>
    <div id="diva1">
        diva1
        <div id="divb1">
            divb1
            <div id="divc1">
                divc1
            </div>
        </div>
        <div id="divb2">
            divb2
            <div id="divc2">
                divc2
            </div>
        </div>
        <div id="divb3">
            divb3
        </div>
    </div>

    =================================<br/>

    <div id="mdiv">
        <input id="name" type="text">
        <a>abc</a>
        <a class="x">efg</a>
    </div>
    <a>hello</a>
    <p>测试一</p>
    <p>测试二</p>
    <p>测试三</p>
    <p>测试四</p><br>

    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />

    <table border="4">
        <tbody>
            <tr><td>a</td><td>a</td></tr>
            <tr><td>b</td><td>b</td></tr>
            <tr><td>c</td><td>c</td></tr>
            <tr><td>d</td><td>d</td></tr>
            <tr><td>e</td><td>e</td></tr>
            <tr><td>f</td><td>f</td></tr>
        </tbody>
    </table>
</body>
</html>